<template>
  <div class="app-container">
    <tit></tit>
    <div class="dis-flex mb-30">
      <el-row :gutter="20" class="flex-1">
        <el-col :span="3">
          <el-input v-model="account" placeholder="用户名" class="mr-10"></el-input>
        </el-col>
        <el-col :span="2">
          <el-select v-model="isEnabled" placeholder="启用状态">
            <el-option v-for="item in lists" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="success" class="theme-bg-color theme-bd-color" @click="getQuerySubAccount(page)">查询</el-button>
        </el-col>
      </el-row>
      <el-button type="primary" class="theme-bg-color theme-bd-color" @click="addUser">
        <i class="el-icon-plus el-icon--right mr-10"></i>添加子账号</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="子账户编号" width=" 180">
          <template slot-scope="scope">
            {{scope.row.userMain.code}}
          </template>
        </el-table-column>
        <el-table-column label="用户账号" width="180">
          <template slot-scope="scope">
            {{scope.row.userMain.username}}
          </template>
        </el-table-column>
        <el-table-column label="身份证号码  " width=" 180">
          <template slot-scope="scope">
            {{scope.row.userMain.userInfo.idCardNum}}
          </template>
        </el-table-column>
        <el-table-column label="联系人">
          <template slot-scope="scope">
            {{scope.row.userMain.userInfo.contact}}
          </template>
        </el-table-column>
        <el-table-column label="手机号码">
          <template slot-scope="scope">
            {{scope.row.userMain.phone}}
          </template>
        </el-table-column>
        <el-table-column label="有效期">
          <template slot-scope="scope">
            {{scope.row.userMain.buyDateLength}} 天
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.userMain.isEnabled" class="Jstate Jstate-s">
              <span></span>已激活</div>
            <div v-else class="Jstate Jstate-f">
              <span></span>未激活</div>
          </template>
        </el-table-column>
        <el-table-column label="激活日期">
          <template slot-scope="scope">
            {{scope.row.userMain.enableDate?scope.row.userMain.enableDate:'/'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text" size="small" class="preview el-button--text-preview">查看</el-button>
            <a :href="scope.row.storeUrl" target="_blank" class="el-button--text-login ml-10">登录后台</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="prev, pager, next,sizes,jumper" :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import tit from '@/components/Htitle'
  export default {
    data() {
      return {
        lists: [
          {
            value: '',
            label: "全部"
          },
          {
            value: 'n',
            label: "未激活"
          },
          {
            value: 'y',
            label: "已激活"
          }
        ],
        isEnabled: '',
        page: '',
        tableData: null,
        total: null,
        pageSize: 10,
        account: '' //用户名
      }
    },
    components: {
      tit
    },
    mounted() {
      this.getQuerySubAccount()
    },
    methods: {
      getQuerySubAccount(page = 1, pageSize = 10) {
        let self = this
        let data = {}
        data.isEnabled = self.isEnabled
        data.account = self.account
        data.page = page
        data.pageSize = pageSize
        this.$store.dispatch('querySubAccount', data).then(res => {
          if (res.success) {
            self.tableData = res.pageInfo.list
            self.page = res.pageInfo.page
            self.total = res.pageInfo.total
            self.pageSize = res.pageInfo.pageSize
          }
        })
      },
      addUser() {
        this.$router.push({ name: 'Table' })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        let self = this;
        self.tableData = null;
        self.getQuerySubAccount(1, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let self = this;
        self.tableData = null;
        self.getQuerySubAccount(val)
      },
      currentPage(val) {
        console.log(val)
      },
      handleClick(id) {
        this.$router.push({ name: 'Detail', query: { id: id } })
      }
    }
  }
</script>
<style scoped lang="scss">
  .line {
    text-align: center;
  }

  .table {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 26px;
    background-color: #ffffff;
  }

  .table:after {
    content: '';
    width: 0;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
  }

  .Jstate span {
    display: inline-block;
    height: 6px;
    width: 6px;
    margin-right: 10px;
    border-radius: 100%;
    background-color: rgba(26, 169, 123, 1);
    vertical-align: middle;
  }

  .Jstate-f span {
    background: rgba(155, 155, 155, 1);
  }

  .Jstate {
    text-align: center;
    position: relative;
    padding-left: 12px;
  }
</style>